import React from 'react';
import { NavLink } from 'react-router-dom';
import { Menu } from 'antd';
import MenuItem from 'antd/lib/menu/MenuItem';
import styles from './style.scss';
import SubMenu from 'antd/lib/menu/SubMenu';

class LeftMenu extends React.Component {
  render() {
    return (
      <Menu
        style={{ width: 200 }}
        mode="inline"
        className={styles.leftMenu}
      >
        <MenuItem>
          <NavLink to="/" exact activeClassName={styles.navActive}>
            首页
          </NavLink>
        </MenuItem>
        <MenuItem>
          <NavLink to="/orders" exact activeClassName={styles.navActive}>
            订单
          </NavLink>
        </MenuItem>
        <MenuItem>
          <NavLink to="/warehouse" exact activeClassName={styles.navActive}>
            入库
          </NavLink>
        </MenuItem>
        <MenuItem>
          <NavLink to="/material" exact activeClassName={styles.navActive}>
            物资
          </NavLink>
        </MenuItem>
        {/* <MenuItem>
          <NavLink to="/orders" exact activeClassName={styles.navActive}>
            结算
          </NavLink>
        </MenuItem> */}
        <SubMenu title={<span>对账</span>}>
          <MenuItem>
            <NavLink to="/check/customers" exact activeClassName={styles.navActive}>客户对账</NavLink>
          </MenuItem>
          <MenuItem>
            <NavLink to="/check/suppliers" exact activeClassName={styles.navActive}>供应商对账</NavLink>
          </MenuItem>
        </SubMenu>
        <SubMenu title={<span>管理</span>}>
          <MenuItem>
            <NavLink to="/manage/customers" exact activeClassName={styles.navActive}>客户</NavLink>
          </MenuItem>
          <MenuItem>
            <NavLink to="/manage/goods" exact activeClassName={styles.navActive}>商品</NavLink>
          </MenuItem>
          <MenuItem>
            <NavLink to="/manage/suppliers" exact activeClassName={styles.navActive}>供应商</NavLink>
          </MenuItem>
        </SubMenu>
      </Menu>
    );
  }
}

export default LeftMenu;